<template>
  <div class="answer_list">
    <!--    顶部返回按钮-->
    <div class="head_return" @click="headReturn"></div>
    <div class="topic_top">
      <img :src="topimg" alt="" />
    </div>
    <div class="topic_con">
      <!-- 题干区域 ------------------------------------------------------------------- -->
      <template v-if="$store.state.testType == 'stem'">
        <!-- 当前组 readSpanStemlist.current_page -->
        <div class="curr_group">
          <img
            :src="
              require('../../assets/image/lesson/' + currGroupImg + 'group.png')
            "
            alt=""
          />
        </div>
        <readspan :readSpanStemlist="readSpanStemlist" />
        <!--      机器人指引图标-->
        <div class="kefu_box">
          <img
            class="kefu_img"
            src="../../assets/image/lesson/questions.gif"
            alt=""
          />
          <div class="countdown">
            <div :style="{ width: countNum }"></div>
          </div>
        </div>
      </template>
      <!-- 题干区域 ------------------------------------------------------------------- -->

      <!-- 相关问题区域------------------------------------------------------------------>
      <template v-else>
        <!-- 当前组 readSpanStemlist.current_page -->
        <div class="topic_progress">
          <div class="topic_group">
            <img
              :src="
                require('../../assets/image/lesson/' +
                  currGroupImg +
                  'group.png')
              "
              alt=""
            />
          </div>
          <div class="progress_list">
            <div class="pro_mask" :style="{ width: countDownTime + '%' }"></div>
          </div>
        </div>
        <topicProblem :readSpanStemlist="readSpanStemlist" />

        <!--      机器人指引图标-->
        <div class="guide_icon">
          <!--        文本提示-->
          <div class="popup-wrap flashing" v-if="!tipsType"> 
            <div class="popup-con">快来回答第 {{currGroupImg}} 组题吧!</div>
          </div>
          <!--        开始答题-->
          <img
            v-if="tipsType"
            src="../../assets/image/lesson/questions.gif"
            alt=""
          />
          <img v-else src="../../assets/image/lesson/miguide.gif" alt="" />
        </div>
        <!-- 收藏成功弹框 -->
        <div class="collec_success" v-if="collecSuccess">
          <div class="collec_icon">
            <img src="../../assets/image/lesson/collecimg.png" alt="" />
          </div>
          收藏成功
        </div>
      </template>
      <!-- 相关问题区域------------------------------------------------------------------>

      <!-- 公共区域--------------------------------------------------------------------->
      <!-- 提交 -->
      <div class="submit" @click="submitAnswer">
        <img src="@/assets/image/lesson/submit.png" alt="" />
      </div>

      <!-- 试题未做完提交提示框 -->
      <div class="submit_questions" v-show="submitQuestions">
        <div>还有未做答的题,继续提交?</div>
        <div class="sub_mit">
          <div>是</div>
          <div @click="submitQuestions = false">否</div>
        </div>
      </div>
    </div>

    <!-- 公共区域----------------------------------------------------------------------->
  </div>
</template>

<script>
// 阅读广度 题干组件
import readspan from "@/components/guide/readspan.vue";
// 阅读广度 问题组件
import topicProblem from "@/components/guide/topicProblem.vue";
// 仿打字机效果
import { init } from "ityped";
import question from "../../components/question/index.vue";
import breadth from "@/assets/image/lesson/breadth.png";
export default {
  name: "answerList",
  components: {
    question,
    readspan,
    topicProblem,
  },
  data() {
    return {
      topimg: breadth,
      // 当前组的提 (包括题干和问题)
      currentRead: 0,
      // 左上倒计时滚动条状态
      countDownTime: 0,
      // 设置左上角倒计时状态的定时器
      setCountDownTime: null,
      // 右下角指引机器样式
      tipsType: false,
      // 收藏成功弹框
      collecSuccess: false,
      // 未做完提提交时的提示框
      submitQuestions: false,

      // 倒计时
      countNum: "80%",
    };
  },
  computed: {
    readSpanStemlist() {
      // 当前组的题
      return this.$store.state.readSpanStemlist.data[
        this.$store.state.currentGroup
      ];
    },
    currGroupImg() {
      return this.$store.state.currentGroup + 1;
    },
    // 监听阅读广度测试类型变化
    testType() {
      return this.$store.state.testType;
    },
  },
  methods: {
    // 设置弹框右上角倒计时滚动条状态
    timeRemaining() {
      let _this = this;
      clearInterval(_this.setCountDownTime);
      let newTime = 100;
      this.setCountDownTime = setInterval(() => {
        if (_this.countDownTime < 10) {
          _this.countDownTime += 1;
          return;
        }
        _this.countDownTime = 0;
        clearInterval(_this.setCountDownTime);
      }, newTime);
    },

    // 获取阅读广度数据 (题干和问题)
    getReadSpanStemlist() {
      this.$request({
        method: "GET",
        url: "getReadSpanlist",
      }).then(({ data }) => {
        if (data.code == 200) {
          // 题干content   问题question
          this.$store.commit("setReadSpanStemlist", data.data);
          // this.readSpanStemlist = data.data.data;
          // console.log(this.readSpanStemlist);
          // 调用倒计时
          this.timeRemaining();
        }
      });
    },
    // 返回上一页
    headReturn() {
      this.$router.go(-1);
    },
    // 提交试题
    submitAnswer() {
      console.log(this.$store.state.answer);
      // this.$router.push({ path: "/score" });
      this.$store.commit("changeTestType", "stem");
      // this.submitQuestions = true;
      // 异步修改
      // this.$store.dispatch("changeCurrentRead");
      // this.$request({
      //   method: 'POST',
      //   url: 'saveReadTest',
      //   data:{}
      // }).then(res => {
      //   console.log(res);
      // })
    },
    // 确认提交
    confirmSubmit() {
      console.log(1);
    }, 
  },

  created() {
    // 获取试题
    this.getReadSpanStemlist();
  },
  mounted() {  
    // 三秒后关闭消息提示框
    this.tipsTime = setTimeout(() => {
      this.tipsType = true;
    }, 3300);
  },
  watch: {
    // 阅读广度测试类型变化后触发
    testType(type) {
      console.log(type);
      // tigann yemina
      if (type == "stem") {
        console.log("题干页面");
      } else {
        // 试题选项页面
        clearInterval(this.tipsTime); 
        this.tipsType = false; 
        this.tipsTime = setTimeout(() => {
          this.tipsType = true;
        }, 3300);
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.setCountDownTime);
    clearInterval(this.tipsTime);
  },
};
</script>

<style lang="less" scoped>
.answer_list {
  position: relative;
  height: 100vh;
  font-size: 0.16rem;
  color: #fff;
  overflow: hidden;
  background: url("../../assets/image/lesson/lesback.png") no-repeat;
  background-size: 100% 100%;

  .head_return {
    position: absolute;
    top: 0.3rem;
    left: 0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    background: url("../../assets/image/lesson/return.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    & > img {
      width: 100%;
      height: 100%;
    }
  }

  .topic_top {
    margin: -0.8rem auto 0 42%;
    width: 3.66rem;
    height: 2.03rem;
    & > img {
      width: 88%;
      height: 100%;
    }
  }
  .topic_con {
    position: relative;
    margin: 0 auto;
    margin-top: 0.21rem;
    padding: 1.06rem 1rem 0.63rem 1.27rem;
    width: 12.07rem;
    height: 7.65rem;
    color: #5175df;
    box-sizing: border-box;
    background: url("../../assets/image/lesson/backgd.png") no-repeat;
    background-size: 100% 100%;
    // 提交
    .submit {
      position: absolute;
      left: 50%;
      bottom: -0.3rem;
      transform: translateX(-50%);
      width: 2rem;
      height: 0.8rem;
      cursor: pointer;
      & > img {
        width: 100%;
      }
    }

    .topic_progress {
      position: absolute;
      top: -0.4rem;
      left: -0.32rem;
      width: 3.8rem;
      height: 1.2rem;
      background: url("../../assets/image/lesson/progress.png");
      background-size: 100% 100%;
      .topic_group {
        position: absolute;
        top: 50%;
        left: 0.3rem;
        transform: translateY(-50%);
        width: 0.7rem;
        height: 0.35rem;
        & > img {
          width: 100%;
        }
      }
      .progress_list {
        display: flex;
        justify-content: space-around;
        position: absolute;
        right: 0.42rem;
        bottom: 0.32rem;
        width: 1.96rem;
        height: 0.15rem;
        background: url("../../assets/image/lesson/protime.png");
        background-size: 100% 100%;

        .pro_mask {
          width: 0;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #7e84c8;

          &::before {
            position: absolute;
            left: 0;
            top: -0.2em;
            content: "";
            width: 0.2rem;
            height: 0.2rem;
            border-radius: 50%;
          }
        }
      }
    }
    .curr_group {
      position: absolute;
      top: -0.5rem;
      left: -0.39rem;
      width: 2.06rem;
      height: 1.34rem;
      background: url("../../assets/image/lesson/group.png") no-repeat;
      background-size: 100% 100%;
      & > img {
        margin: 0.5rem 0 0 0.34rem;
        width: 0.7rem;
        height: 0.35rem;
      }
    }
    // 收藏成功
    .collec_success {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding-left: 0.3rem;
      display: flex;
      align-items: center;
      width: 2.26rem;
      height: 0.84rem;
      line-height: 0.84rem;
      text-align: center;
      color: #fff;
      box-shadow: 0px 3px 10px 0px rgba(255, 184, 71, 0.54);
      font-size: 0.21rem;
      border-radius: 0.1rem;
      background: #ffa210;
      box-sizing: border-box;
      .collec_icon {
        position: relative;
        width: 0.54rem;
        height: 0.43rem;
        background: url("../../assets/image/lesson/collecicon.png") no-repeat;
        background-size: 100% 100%;
        & > img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 0.26rem;
        }
      }
    }
    .submit_questions {
      padding-top: 0.78rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 0.21rem;
      width: 4.78rem;
      height: 2.34rem;
      text-align: center;
      background: url("../../assets/image/lesson/questions.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      .sub_mit {
        margin: 0.36rem auto 0 auto;
        display: flex;
        justify-content: space-between;
        width: 2.19rem;
        & > div {
          width: 0.84rem;
          height: 0.42rem;
          line-height: 0.42rem;
          text-align: center;
          background: #ffffff;
          color: #353535;
          box-shadow: 0px 3px 6px 0px rgba(7, 49, 162, 0.54);
          border-radius: 0.21rem;
          cursor: pointer;
        }
        & div:nth-child(2) {
          background: #c9e3ff;
          color: #3d66cf;
        }
      }
    }
  }

  .guide_icon {
    position: absolute;
    right: -0.8rem;
    bottom: -0.2rem;
    width: 1.6rem;
    height: 2rem;

    & > img {
      width: 100%;
    }

    .popup-wrap {
      position: absolute;
      background: #467ef3;
      width: 2rem;
      top: 0;
      left: -1.8rem;
      border-radius: 6px;
      .popup-con {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0.2rem;
        box-sizing: border-box;
        font-size: 0.2rem;
        color: #fff;
        letter-spacing: 0.04rem;
        //&:before {
        //  width: .2rem;
        //  height: .2rem;
        //  background: #467ef3;
        //  content: '';
        //  position: absolute;
        //  top: 50%;
        //  right: 0;
        //  transform: translate(50%, -50%) rotate(45deg);
        //}
      }
    }
    //动画

    .flashing {
      animation: opacitys 0.8s;
    }
    @keyframes opacitys {
      0% {
        transform: rotate(0deg);
      }
      50% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
      }
      60% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
      }
      70% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
      }
      80% {
        -webkit-transform: rotate(-6deg);
        transform: rotate(-6deg);
      }
      90% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
      }
      100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
  }
  .kefu_box {
    position: absolute;
    right: -0.52rem;
    bottom: -0.25rem;
    width: 0.97rem;
    height: 1.68rem;
    // position: fixed;
    // bottom: 0.76rem;
    // right: 2.32rem;
    .kefu_img {
      width: 100%;
      height: 100%;
    }
    .countdown {
      width: 2.42rem;
      height: 0.56rem;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-image: url(../../assets/image/lesson/qujishidi.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      & > div {
        position: absolute;
        left: 0;
        top: 0;
        height: 0.62rem;
        background-image: url(../../assets/image/lesson/qujishi.png);
        background-size: 2.49rem 0.62rem;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
